<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="品类名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入品类名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="字段类型">
          <el-select
            v-model="searchForm.field_type"
            placeholder="全部"
            clearable
          >
            <el-option label="文本框" :value="1"></el-option>
            <el-option label="单选" :value="2"></el-option>
            <el-option label="多选" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right: 15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        icon="el-icon-plus"
        class="add-btn"
        @click="addSources"
        >添加表单项</el-button
      >
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" label="ID" prop="id" width="100" />
      <el-table-column align="center" label="品类名称" prop="name" />
      <el-table-column
        align="center"
        label="字段排序"
        prop="field_order"
        width="100"
      />
      <el-table-column align="center" label="字段描述" prop="field_title" />
      <el-table-column align="center" label="字段类型" prop="field_type" />
      <el-table-column
        align="center"
        label="字段值"
        prop="field_val"
        width="260"
      />
      <el-table-column label="必填项" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.must_is == '否' ? 'danger' : 'success'">{{
            scope.row.must_is == "否" ? "否" : "是"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="创建时间" prop="create_time" />
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#edit')"
            size="mini"
            type="primary"
            @click="editItem(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="$hasMethod('#delete')"
            @click="deleteItem(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-custom
      ref="saveTagInput"
      :handleDialog="handleDialog"
      :dialogTitle="dialogTitle"
      :isEdit="isEdit"
      :customForm="customForm"
      :cateList="cateList"
      :tagsList="tagsList"
      :isInputVisible="inputVisible"
      @submitForm="submitForm"
      @closeDialog="closeDialog"
      @closeTag="closeTag"
      @showInput="showInput"
      @changeCascader="changeCascader"
      @tagInputConfirm="tagInputConfirm"
    >
    </add-custom>
  </div>
</template>

<script>
import { formList, updateForm, getCategoryInfo, delForm } from "@/api/info";
import customPage from "@/components/customPage";
import addCustom from "../custom/addCustom";
export default {
  components: { customPage, addCustom },
  data() {
    return {
      tableData: [],
      dialogTitle: "",
      handleDialog: false,
      isEdit: true,
      total: 0,
      cateList: [],
      searchForm: {
        name: "",
        field_type: "",
      },
      customForm: {
        category_id: "",
        field_order: "",
        field_title: "",
        field_type: "",
        field_val: "",
        must_is: 1,
      },
      tagsList: [],
      inputVisible: false,
    };
  },
  methods: {
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = Object.assign({});
      this.getList();
    },
    addSources() {
      if (this.$refs.saveTagInput.$refs.customForm) {
        this.$refs.saveTagInput.$refs.customForm.resetFields();
      }
      this.dialogTitle = "添加表单项";
      this.handleDialog = true;
      this.isEdit = true;
      this.customForm = {
        category_id: "",
        field_order: "",
        field_title: "",
        field_type: "",
        field_val: "",
        must_is: 1,
      }
      this.tagsList = []
    },
    submitForm() {
      if(this.tagsList.length == 0){
        this.$message.error("字段值不能为空")
        return false
      } else {
        this.customForm.field_val = this.tagsList.join(',')
        updateForm(this.customForm).then((res) => {
          this.handleDialog = false;
          this.getList();
        });
      }
    },
    deleteItem(id) {
      this.$confirm("您确定要删除吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delForm(id).then((res) => {
          this.getList();
        });
      });
    },
    editItem(row) {
      if (this.$refs.saveTagInput.$refs.customForm) {
        this.$refs.saveTagInput.$refs.customForm.resetFields();
      }
      this.dialogTitle = "编辑表单项";
      this.handleDialog = true;
      this.isEdit = false;
      let form = { ...row };
      delete form.name
      delete form.create_time
      this.tagsList = form.field_val ? form.field_val.split(',') : []
      form.must_is = form.must_is =='是' ? 1 : 0
      form.field_type = form.field_type =='文本框' ? 1 : form.field_type =='单选' ? 2 : 3
      this.customForm = form;
    },
    closeDialog() {
      this.customForm = Object.assign({});
      this.handleDialog = false;
    },
    closeTag(tag) {
      this.tagsList.forEach((item, index) =>{
        if(tag && tag == item){
          this.tagsList.splice(index, 1)
        }
      })
    },
    tagInputConfirm(val) {
      this.tagsList = val
    },
    showInput() {
      this.inputVisible = true;
    },
    changeCascader(val){
      this.customForm.category_id = val
    },
    getCateList() {
      getCategoryInfo().then((res) => {
        this.cateList = res || [];
      });
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      formList({
        page,
        pageSize,
        name: this.searchForm.name,
        field_type: this.searchForm.field_type,
      }).then((res) => {
        // console.log('res',res)
        this.tableData = res.data;
        this.total = res.total;
      });
    },
  },
  mounted() {
    this.getList();
    this.getCateList();
  },
};
</script>

<style lang="scss" scoped>
</style>
